<template>
	<view>
		<view class="image">
		</view>
		<view @click="detail(item)" class="body" v-for="(item,index) in list" :key="index">
			<view class="img">
				<u--image :src="get_img+item.image" radius="20rpx" width="180rpx" height="180rpx"></u--image>
			</view>
			<view class="kuai">
				<p class="shop_name">{{item.shop_name}}</p>
				<view class="xiangxi">
					<!-- <view style="width: 200rpx;height: 40rpx;float: left;font-weight: 400;font-size: 12px;">
						<view style="float: left;">
							<u-rate :count="count" v-model="value" active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></u-rate>
						</view>
						<p style="color:#FF5012;float: right;">4.3分</p>
					</view> -->
					<view class="renjun">￥{{item.price}}元</view>
				</view>
				<view class="xiaokuai">
					<p class="address">{{item.address}}</p>
					<view style="float: right;"> 量贩式KTV</view>
				</view>
			</view>
		</view>
		<!-- 兑换弹窗 -->
		<!-- <view>
			<u-modal :show="show" :title="title" cancelText="取消" showCancelButton="true" @confirm="confirm"
				@cancel="cancel">
				<rich-text :nodes="content"></rich-text>
			</u-modal>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 3,
				count: 5,
				list1: [{}, {}, {}, {}, {}, {}],
				show: false,
				title: '兑换',
				content: ` 是否确定要将购房优惠卷兑换<br>为靓 K·party优惠卷`,
				page: 1,
				num: 10,
				reach: false,
				list: [],
				get_img: this.$get_img,
			}
		},
		onLoad() {
			this.get_goods()
		},
		onReachBottom() {
			if (!this.reach) {
				this.page++
				this.get_goods()
			}

		},
		methods: {
			get_goods() {
				let that = this
				this.$model.get("user/goods/get_goods?page=" + this.page + "&num=" + this.num).then(res => {
					if (res.code == 200) {
						if (res.data.data.length > 0) {
							res.data.data.forEach(function(value) {
								that.list.push(value)
							})
							console.log("res.data.data:", that.list)
							uni.setStorageSync("details",that.list)
						} else {
							that.reach = true
						}
					}
				})
			},
			// search() {
			// 	this.reach = false
			// 	this.list = []
			// 	this.page = 1
			// 	this.get_goods()
			// },
			detail(item) {
				console.log("item:",item)
				uni.navigateTo({
					url: "/pages/coupon/entertainment_detail?id=" + item.id
				})
			}
		}
	}
</script>

<style>
	.image {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: -1;
		background-color: #fff;
		/* background-image: url('https://cdn.uviewui.com/uview/album/1.jpg'); */
	}

	.jphx {
		text-align: center;
		color: orangered;
	}

	.jphx_img {
		width: 400rpx;
		height: 400rpx;
	}

	.body {
		width: 720rpx;
		height: 200rpx;
		margin: auto;
		background-color: #fff;
		margin: 10rpx auto 30rpx auto;
	}

	.img {
		float: left;
		width: 200rpx;
		height: 200rpx;
	}

	.kuai {
		float: right;
		width: 500rpx;
		height: 150rpx;
		margin: 15rpx auto auto 20rpx;
	}

	.shop_name {
		font-size: 14px;
		font-weight: 500;
	}

	.xiangxi {
		width: 380rpx;
		height: 40rpx;
		margin-top: 10rpx;
	}

	.renjun {
		width: auto;
		height: 40rpx;
		font-weight: 400;
		font-size: 13px;
		margin-top: 15rpx;
	}

	.xiaokuai {
		width: auto;
		height: 40rpx;
		margin-top: 15rpx;
		font-size: 12px;
		color: #4D4D4D;
		font-weight: 400;
	}

	.address {
		float: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 330rpx;
	}
</style>
